<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Barcode Example</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var scan = null;

			function onmarked(type, result) {
				var text = '未知: ';
				switch (type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break; 
				}
				plus.nativeUI.confirm(result,function () {
					startRecognize();
				})
			}

			function setFlash(swtich) {
				scan.setFlash(swtich);
			}


			function startRecognize() {
				scan = new plus.barcode.Barcode('bcid');
				scan.onmarked = onmarked;
				scan.start();
			}
		</script>
		<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				startRecognize();
				//关闭窗口
				var swtich = true;
				plus.key.addEventListener('backbutton', function() {
						plus.webview.close('barcode.html');
					})
					//闪光灯开关
				$("#setFlash").on('tap', function() {
					if (swtich == true) {
						setFlash(swtich);
						swtich = false;
					} else {
						setFlash(swtich);
						swtich = true;
					}
				})
			})
		</script>
		<style type="text/css">
			html,
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}
			#bcid:after {
				text-align: center;
				content: '载入中...';
			}
			#bcid {
				height: 90%;
				width: 100%;
			}
			.row {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 10%;
				background: #222222;
				text-align: center;
			}
			#setFlash {
				color: white;
				font-size: 3em;
			}
		</style>
	</head>

	<body>
		<div id="bcid"></div>
		<div class="row">
			<span id="setFlash" class="mui-icon mui-icon-camera"></span>
		</div>
	</body>

</html>